<template>
    <n-card :bordered="false" content-style="padding: 0">
        <n-card :bordered="false" content-style="padding: 0; display: flex; justify-content: space-between;">
            <n-space>
                <n-form-item label="编号" label-placement="left" :show-feedback="false">
                    <n-input v-model:value="form.id" size="small"/>
                </n-form-item>
            </n-space>
            <n-space>
                <n-button size="small" type="info" @click="handleSelectOnClick">查询</n-button>
            </n-space>
        </n-card>
        <n-card :bordered="false" content-style="padding: 10px 0; display: flex; justify-content: space-between;">
            <n-space>
                <n-button @click="handleDictInsertOnClick" size="small" type="info">新增</n-button>
            </n-space>
        </n-card>
        <n-data-table
            :row-key="(row: SystemCodeVO) => row.id"
            table-layout="fixed"
            :bordered="false"
            :loading="loading"
            :columns="columns"
            :data="records"
            @load="onLoad"
        />
        <DictModal
            :show="DictModalData.show"
            :title="DictModalData.title"
            :row="DictModalData.row"
            @handleSelectOnClick="handleSelectOnClick"
            @handleCloseOnClick="handleDictCloseOnClick"
        />
        <CodeModal
            :show="ModalData.show"
            :title="ModalData.title"
            :row="ModalData.row"
            :dict="ModalData.dict"
            @handleSelectOnClick="handleSelectOnClick"
            @handleCloseOnClick="handleCloseOnClick"
        />
    </n-card>
</template>
<script lang="ts" setup>
import { basicColumns } from './columns'
import { h, reactive, onMounted, toRefs, computed, ComputedRef } from 'vue'
import { NSpace, NButton, DataTableColumn } from 'naive-ui'
import { getCodeListByDictId, deleteCode } from '@/api/system/code'
import { getDictPage, deleteDict } from '@/api/system/dict'
import { usePagination } from '@/hooks/usePagination'
import { IMessage, IConfirmMessage } from '@/utils/message'
import DictModal from './modal/DictModal.vue'
import CodeModal from './modal/CodeModal.vue'

const state = reactive({
    loading: false,
    pagination: usePagination(handleSelectOnClick),
    records: [] as Array<SystemCodeVO>,
    form: {} as SystemDict,
    ModalData: {
        show: false,
        title: '',
        row: {} as SystemCode,
        dict: {} as SystemDict
    },
    DictModalData: {
        show: false,
        title: '',
        row: {} as SystemDict
    }
})

const {
    loading,
    form,
    records,
    ModalData,
    DictModalData
} = toRefs(state)

const columns: ComputedRef<Array<DataTableColumn<SystemCodeVO>>>  = computed(() => (
    [
       	...basicColumns,
       	{
           	title: '操作',
           	key: 'actions',
           	width: 200,
           	render(row){
                if(!row.isLeaf){
                    return h(
                        NSpace,
                        () => [
                            h(
                                NButton,
                                {
                                    size: 'tiny',
                                    onClick: () => handleInsertOnClick(row)
                                },
                                { default: () => '新增' }
                            ),
                            h(
                                NButton,
                                {
                                    size: 'tiny',
                                    onClick: () => handleDictUpdateOnClick(row)
                                },
                                { default: () => '修改' }
                            ),
                            h(
                                NButton,
                                {
                                    size: 'tiny',
                                    onClick: () => handleDictDeleteOnClick(row)
                                },
                                { default: () => '删除' }
                            )
                        ]
                    )
                } else {
                    return h(
                        NSpace,
                        () => [
                            h(
                                NButton,
                                {
                                    size: 'tiny',
                                    onClick: () => handleUpdateOnClick(row)
                                },
                                { default: () => '修改' }
                            ),
                            h(
                                NButton,
                                {
                                    size: 'tiny',
                                    onClick: () => handleDeleteOnClick(row)
                                },
                                { default: () => '删除' }
                            )
                        ]
                    )
                }
           	}
       }
   ]
))

onMounted(() => {
    handleSelectOnClick()
})

const onLoad = async (row: Record<string, any>) => {
    const { data } = await getCodeListByDictId(row.id)
    row.children = data.map(ele => {
        return { ...ele, isLeaf: true }
    })
}

async function handleSelectOnClick(){
    state.loading = true
    const { data } = await getDictPage(state.pagination, state.form)
    const records = data.records.map(ele => {
        return { ...ele, isLeaf: false }
    })
    state.records = records
    state.loading = false
}

const handleDictInsertOnClick = () => {
    state.DictModalData.show = true
    state.DictModalData.title = '新增'
}

const handleDictUpdateOnClick = (row: SystemCodeVO) => {
    state.DictModalData.show = true
    state.DictModalData.title = '修改'
    state.DictModalData.row = { id: row.id } as SystemDict
}

const handleDictDeleteOnClick = (row: SystemCode) => {
    IConfirmMessage({
        content: '确认删除？',
        onSuccess: async () => {
            const{ message } = await deleteDict(row.id)
            IMessage({ content: message })
            handleSelectOnClick()
        }
    })
}

const handleInsertOnClick = (row: SystemCode) => {
    state.ModalData.show = true
    state.ModalData.title = '新增'
    state.ModalData.row = {} as SystemCode
    state.ModalData.dict =  { id: row.id, name: row.name } as SystemDict
}

const handleUpdateOnClick = (row: SystemCode) => {
    state.ModalData.show = true
    state.ModalData.title = '修改'
    state.ModalData.row = row
    state.ModalData.dict = state.records
    .filter(ele => ele.id === row.dictId)
    .map(ele => {
        return { id: ele.id, name: ele.name } as SystemDict
    })[0]
}

const handleDeleteOnClick = (row: SystemCode) => {
    IConfirmMessage({
        content: '确认删除？',
        onSuccess: async () => {
            const{ message } = await deleteCode(row.id)
            IMessage({ content: message })
            handleSelectOnClick()
        }
    })
}

const handleCloseOnClick = () => {
    state.ModalData.show = false
}

const handleDictCloseOnClick = () => {
    state.DictModalData.show = false
}

</script>